import { FC } from "react";
import { Input } from "antd";
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
import type { SearchProps } from "antd/es/input/Search";
import style from "./index.module.scss";
import classnames from "classnames/bind";
import { KEYWORD } from "../../concats";
const CBN = classnames.bind(style);
const { Search } = Input;
const SearchContainer: FC = () => {
  const { pathname } = useLocation();
  const [params] = useSearchParams()
  const nav = useNavigate()
  const onSearch: SearchProps["onSearch"] = (value) => {
    type objType = {
        pathname:string,
        search?:string
    }
    let obj:objType = {
        pathname:pathname,
        search:`keyword=${value}`
    }
    if(!value){
        delete obj.search
    }
    nav(obj)
  };

  return (
    <div className={CBN("SearchContainer")}>
      <Search
        defaultValue={params.get(KEYWORD)!}
        allowClear
        placeholder="请输入搜索"
        onSearch={onSearch}
        style={{ width: 200 }}
      />
    </div>
  );
};

export default SearchContainer;
